<template>
  <div>
    <el-row>
      <el-col :span="14">精品列表</el-col>
    </el-row>
    <el-row v-if="workUserList.length>0">
      <data-table
        :value="jpList"
        :total-count="jpList.length"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        :localPage="true"
      >
        <template #allNum>
          <div class="tabelAomut">
            <div>项目总金额：<span>￥{{totalAmount}}</span></div>
            <div>项目优惠金额：<span>￥{{totalAmount-totalDiscountAmount}}</span></div>
            <div>项目折后总金额：<span>￥{{totalDiscountAmount}}</span></div>
          </div>
        </template>
        <template #action="{ row,index }">
          <i
            class="el-icon-delete"
            title="删除"
            style="color: red; margin-left: 20px; cursor: pointer"

            @click="delTabelData(index)"
          ></i>
        </template>
      </data-table>
    </el-row>
    <el-dialog
      v-if="visible"
      :title="dialogTitle"
      :visible.sync="visible"
      :append-to-body="true"
      :width="'1000px'"
      @close="dialogClose"
    >
      <SelectProductForm
        v-if="dialogTitle == '新增精品'"
        @select="changeListCheck"
      />
    </el-dialog>
  </div>
</template>
<script>
import DataTable from '@/components/DataTable'
import SelectProductForm from '@/components/CommonForm/SelectProductForm'
import { getUserOrTem } from '@/utils/index';
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    list: {
      default: () => { return [] },
    }
  },
  components: {
    DataTable,
    SelectProductForm,
  },
  data () {
    return {
      visible: false,
      dialogTitle: '',
      jpList: [],//项目列表
      workUserList: [],//班组或员工列表
      tableColumnAttributes: [
        { name: '精品编号', value: 'orderNo', type: 'text', width: 150 },
        { name: '精品名称', value: 'name', type: 'text', width: 200 },
        { name: '一级类别', value: 'appLargeIdOneValue', type: 'text' },
        { name: '二级类别', value: 'appLargeIdTwoValue', type: 'text' },
        { name: '供应商', value: 'supplierName', type: 'text', width: 200 },
        { name: '销售价', value: 'currentPrice', type: 'text' },
        { name: '数量', value: 'num', type: 'inputNumber', },
        { name: '折扣', value: 'discount', type: 'inputNumber', max: 10, },
        {
          name: '折后总价', value: 'shouldAmount', type: 'render',
          render: this.discountAmount,
        },
        {
          name: '收费类型', value: 'tollType', type: 'select', options: [
            { index: 1, id: '自费', value: '自费' },
            { index: 2, id: '免费保养', value: '免费保养' },
            { index: 3, id: '索赔', value: '索赔' },
            { index: 4, id: '返工', value: '返工' },
            { index: 5, id: '保险', value: '保险' },
          ]
        },
        { name: '备注', value: 'remark', type: 'input' },
      ],
      totalAmount: 0,//总金额
      totalDiscountAmount: 0 //折后总金额
    }
  },
  watch: {
    jpList: {
      deep: true,
      handler (newValue, oldValue) {
        this.totalAmount = 0;
        this.totalDiscountAmount = 0;
        newValue.forEach((item, index) => {
          this.totalAmount += item.num ? item.num * item.currentPrice : 0;
          this.totalDiscountAmount += Number(this.discountAmount(item));
        })
        this.$emit("setTotalAmount");
      }
    },
    list: {
      deep: true,
      handler (newValue, oldValue) {
        debugger
        if (Array.isArray(newValue) && newValue.length > 0) {
          this.jpList = newValue;
        }
      }
    }
  },
  mounted () {
    this.jpList = this.list
  },
  methods: {
    //计算折扣
    discountAmount (row, value) {
      let sum = row.num ? row.num * row.currentPrice : 0, _amount = 0;
      if (row.tollType && (row.tollType == '免单' || row.tollType == '返工')) {
        _amount = 0;
      } else {
        _amount = sum;
        if (row.discount > 0) {
          _amount = (sum * Number(row.discount / 10)).toFixed(2);
        }
      }
      return _amount
    },
    handleDataInsert (title) {
      this.visible = true;
      this.dialogTitle = title;
    },
    //表单删除
    delTabelData (index) {
      this.jpList.splice(index, 1);
    },
    //弹窗选择
    changeListCheck (list) {
      list.forEach(e => {
        e.appLargeIdOneValue = e.appLargeOne;
        e.appLargeIdTwoValue = e.appLargeTwo;
        e.boutiqueId = e.id;
        e.discount = 10;
        delete e.id;
      })
      this.jpList = this.jpList.concat(list);
      this.dialogClose();
    },
    dialogClose () {
      this.visible = false;
    },
  },
  async created () {
    let arry = await getUserOrTem();
    this.workUserList = arry;
    this.tableColumnAttributes[this.tableColumnAttributes.length - 2].options = this.workUserList;
  }
}
</script>
<style lang="scss" scoped>
.greeColor {
  color: #85ce61;
}
</style>
